<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="css/reset.css" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <link rel="stylesheet" type="text/css" href="css/animation.css" />
    <link rel="stylesheet" type="text/css" href="css/button.css" />
    <link rel="stylesheet" type="text/css" href="css/login.css" />
    <title>首页</title>



</head>
<style>

</style>



<body>
    <div class="web">
            <header>
                    <section><img src="images/logo_03.jpg"></section>
                    <section><img src="images/logo.jpg"></section>
                    <nav class="btn_nav">
                        <span></span>
                        <span></span>
                        <span></span>
                     </nav>
                    <ul class="nav">
                            <li class="border_san"><a href="index.html">首页</a></li>
                            <li><a href="video.html">视频</a></li>
                            <li><a href="fun.html">功能</a></li>
                            <li><a href="consult.html">咨询</a></li>
                            <li><a href="actor.html">名伶</a></li>
                            <li class="toggle_btn"><a>登录</a></li>
                    </ul>
            </header>
            <article class="banner">
                    <section>
                        <span class="t_title">马上就要来了</span>
                        <p>好戏即将登场</p>
                        <p>粤好戏APP给你不一样的好看</p>
                        <span>正式上线时间在四月份中旬，<br>
                            安卓苹果同时上线</span>
                        <article class="mouse-cursor-gradient-tracking downLoadBtn"><span>预下载&nbsp;马上</span></article>
                    </section>
                    <aside>
                        <img src="images/yuan.png">
                        <div class="img_content">
                                <img src="images/banner_03.jpg">
                        </div>
                    </aside>
            </article>
            <ul class="num">
                   <li>
                       <span>65</span>
                       <p>Android Download</p>
                   </li> 
                   <li>
                    <span>56</span>
                    <p>iOS Download</p>
                </li> 
                <li>
                    <span>300</span>
                    <p>Traffic volume</p>
                </li> 
                <li>
                    <span>265</span>
                    <p>User number</p>
                </li> 
            </ul>
            <section class="middle_content">
                <p class="about">关于我们</p>
                <p class="p_content">
                    这是一个关于中国粤剧文化的页面以及我们将要上线的产品，这个产品兼备各种粤剧文化的有趣详解，以及利用高精确的技术纠正你的粤剧发音
                    和唱腔方式，它具有跟唱的逐句教学功能，以及令人惊叹的声音识别系统，能够准确保证你的音准和时值把控能力。<br>
                    像玩游戏一样下载这个APP吧，它会让你更加了解中国的文化，在这个APP里面你能找到的不只是粤剧，还有整个优秀中华文化的缩影，我们可以
                    得到很好的只知识储备，让我们重新审视优秀传统吧，加入我们，给我们提供意见和发展动力。
                </p>
                <ul>
                    <li>
                        <div>
                            <img src="images/tx1.png">
                        </div>
                        <p>这次的产品完成得非常困难，事情好像做不完<br>
                            一样，做完一件才发现还有好多件没做</p>
                        <span>3月20日，MARY</span>
                    </li>
                    <li>
                        <div>
                            <img src="images/tx2.png">
                        </div>
                        <p>这次的产品完成得非常困难，事情好像做不完<br>
                            一样，做完一件才发现还有好多件没做</p>
                        <span>3月20日，MARY</span>
                    </li>
                </ul>
            </section>
           <footer>
                <img src="images/footer_02.jpg">
                <aside>
                    <p>意见反馈 & 让我们变得更好</p>
                    <input type="text">
                    <span>sumbit</span> 
                </aside> 
           </footer>
    </div>

    <!--登录-->
    <div class="login">
        <article>
                <section class="login_left">
                        <img src="images/dl_03.jpg">
                </section>
                 <form class="login_right login_box">
                        <h3>登录</h3>
                        <input type="text" placeholder="请输入用户名/手机号" required>
                        <input type="password" placeholder="请输入密码" required minlength="8" maxlength="15" required/><br>
                        <input type="submit" value="确认登录">
                        <p>还没注册？去<span class="reg_btn">注册</span></p>
                </form> 
                <form class="login_right register">
                    <h3>注册</h3>
                    <input type="text" placeholder="请输入手机号注册" required>
                    <input  placeholder="请输入密码"  type="password" minlength="8" maxlength="15" required/><br>
                    <input  placeholder="请确认密码"  type="password" minlength="8" maxlength="15" required/><br>
                    <input type="submit" value="确认注册">
                    <p>注册完成？去<span class="login_btn">登录</span></p>
            </form>
        </article>
        <span class="back">返回</span>
</div>
<div class="zz">
    <div class="video_box">
        <video controls>
                
                <source src="movie.mp4"  type="video/mp4">
                <source src="movie.ogg"  type="video/ogg">
                您的浏览器不支持 HTML5 video 标签。
        </video>
        <span class="x_close">×</span>
    </div> 
</div>  
</body>
<script src="js/response.js"></script>
<script src="js/button.js"></script>
<script src="js/logres.js"></script>
<script src="js/nav.js"></script>
<script>
    var downLoadBtn = document.querySelector(".downLoadBtn");
    downLoadBtn.addEventListener("click",function(){
            var str = prompt("你输入你要预下载的电话号");
            var phoneReg = /^1[3-9][0-9]{9}$/;
            if(phoneReg.test(str)){
                alert("恭喜你，注册成功");
            }else{
                alert("电话输入不正确，请重新操作");
            }
    })

//视频弹出
var img_content = document.querySelector(".img_content");
var vedio = document.querySelector(".zz");
       var x_close = document.querySelector(".x_close");
img_content.addEventListener("click",function(){
    vedio.style.display = "block";
})
x_close.addEventListener("click",function(){
           vedio.style.display = "none";
       })
</script>

</html>